<!doctype html>
<html>
<head>
<meta charset='UTF-8'><meta name='viewport' content='width=device-width initial-scale=1'>
<title>flex布局 基础作业</title></head>
<body><p>单个盒子的水平、垂直均居中</p>
<p><img src="media/image-20201209172051742.png" alt="image-20201209172051742" style="zoom:50%;" /></p>
<p>单个盒子水平居右 垂直居中</p>
<p><img src="media/image-20201209174911302.png" alt="image-20201209174911302" style="zoom: 50%;" /></p>
<p>&nbsp;</p>
<p>一排盒子的水平垂直居中</p>
<p><img src="media/image-20201209172132221.png" alt="image-20201209172132221" style="zoom:50%;" /></p>
<p>多排盒子的水平垂直居中</p>
<p><img src="media/image-20201209172350230.png" alt="image-20201209172350230" style="zoom:50%;" /></p>
<p>两个盒子的左右布局</p>
<p><img src="media/image-20201209173457635.png" alt="image-20201209173457635" style="zoom:50%;" /></p>
<p>垂直水平居中</p>
<p><img src="media/image-20201209175444311.png" alt="image-20201209175444311" style="zoom:50%;" /></p>
<p>三个盒子的圣杯布局</p>
<p><img src="media/image-20201209173600667.png" alt="image-20201209173600667" style="zoom: 50%;" /></p>
<p>思考下怎么实现这种布局</p>
<p><img src="media/image-20201209175208269.png" alt="image-20201209175208269" style="zoom:50%;" /></p>
<p>如何实现如下布局？</p>
<p><img src="media/image-20201209175607882.png" alt="image-20201209175607882" style="zoom:50%;" /></p>
<p>如何实现如下布局？</p>
<p><img src="media/image-20201209175806689.png" alt="image-20201209175806689" style="zoom:50%;" /></p>
<p>&nbsp;</p>
<p>图像与文字的布局</p>
<p><img src="media/image-20201210094513727.png" referrerpolicy="no-referrer" alt="image-20201210094513727"></p>
</body>
</html>